<template>
  <div class="LogRecord">
    <!--    轮播图下面的格子部分-->
    <div>
      <van-grid :column-num="2">
        <van-grid-item icon="photo-o" text="症状拍照" @click="photoBtn"></van-grid-item>
        <van-grid-item icon="records" text="记录不良反应" to="/adverseReactions"></van-grid-item>
        <van-grid-item icon="video-o" text="拍摄症状" @click="videoBtn"></van-grid-item>
        <van-grid-item icon="sign" text="记录发作次数" @click="recortCount"></van-grid-item>
      </van-grid>
    </div>
    <!--    记录发作次数弹出框-->
    <van-overlay :show="recordDiv">
      <div class="wrapper" @click.stop>
        <div class="block">
          <van-nav-bar title="记录本日发作次数"/>
          <div class="recordMain">
            <div>本日是否发作</div>
            <div>
              <van-radio-group v-model="record.isOnset" direction="horizontal">
                <van-radio name="1" value="1">是</van-radio>
                <van-radio name="0" value="0">否</van-radio>
              </van-radio-group>
            </div>
            <van-stepper v-model="record.recordCount" integer
                         input-width="100px"/>
            <div class="recordContent">
              <van-button type="info" size="small" @click="recordConfirmBtn">确认</van-button>
              <van-button type="default" size="small" @click="recordDiv = false;">取消</van-button>
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import {Toast} from "vant";

export default {
  name: "LogRecord",
  computed: {
    ...mapGetters(['loginUserInfo', 'userPhone'])
  },

  data() {
    return {
      recordDiv: false,
      record: {
        recordCount: 1,
        isOnset: 0,
      }
    }
  },
  mounted() {

  },
  methods: {
    //获取最新的发作次数
    recortCount() {
      this.$service.frontPageService.recortCount(this.userPhone).then(res => {
      })
      this.recordDiv = true;
    },
    //发作次数记录
    recordConfirmBtn() {
      if (this.record.isOnset == 1) {//选中是
        this.$service.frontPageService.onsetYes(this.userPhone, this.record.recordCount).then(res => {
          if (res.data.code == 200) {
            Toast(res.data.msg);
            // this.setIsRecord(this.record);//记录发作次数
          }
        })
      } else {//选中否
        this.$service.frontPageService.onsetNo(this.userPhone).then(res => {
          if (res.data.code == 202) {
            Toast(res.data.msg)
          }
        })
      }
      this.recordDiv = false;
    },
    //拍摄症状
    videoBtn() {//拍摄症状按钮
      this.$dialog.alert({
        message: '该功能暂未开放',
      }).then(() => {
        // on close
      });
    },
    //  症状拍照
    photoBtn() {
      this.$dialog.alert({
        message: '该功能暂未开放',
      }).then(() => {
        // on close
      });
    }
  }
}
</script>

<style scoped lang="less">

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 80%;
  background-color: #fff;
}

.recordMain {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;

  div {
    margin-bottom: 10px;
  }

  .recordContent {
    width: 70%;
    display: flex;
    justify-content: space-between;

    .van-button {
      border-radius: 5px;
    }
  }
}

</style>
